<template>
  <div>
    <img
      class="banner"
      src="https://akk.028wkf.cn/kdb-weapp-img/dhs.png"
      mode="scaleToFill"
    />
    <div class="cont">
      <p class="text">
        申请成为
        <span>【兜货商】</span>
        ，您将成为平台的兜货商，您的商品将进入平台豆豆商城向全国销售。您将获得上传豆豆商品的权限，每卖出一件豆豆商品，我们都将按照成本价支付给您相应金额，您商家商品，平台帮您售卖，获得更多曝光机会，有没有心动！
      </p>
    </div>
    <div class="checkboxDiv">
      <i-checkbox @change="handleChange" :checked="checked"></i-checkbox>
      <span>立即成为兜货商即同意</span>
      <a class="link">《豆豆商城兜货商管理制度》</a>
      <a class="link">《豆豆商城规则》</a>
    </div>
    <button class="btn" @click="applyForClick">立即申请</button>
  </div>
</template>

<script>
import {} from '@/utils'
import { CREATE_SHOP_KIND_APPLY_API } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      current: '',
      checked: false
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    applyForClick () {
      const vm = this
      if (vm.checked) {
        vm._createShopKindApplyApi()
      } else {
        vm.$toast('勾选协议')
      }
    },
    handleChange (e) {
      let val = e.target.current
      this.checked = val
    },
    _createShopKindApplyApi () {
      const vm = this
      let params = {
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'DEALER'
      }
      CREATE_SHOP_KIND_APPLY_API(params)
        .then(r => {
          if (r.data.code === '0') {
            wx.showModal({
              title: '资料提交成功',
              content:
                '我们会在1-3个工作日内处理您的申请若有问题请致电400-888-5115',
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: function (res) {
                if (res.confirm) {
                  vm.$router.go(-1)
                }
              },
              fail: function (err) {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.banner {
  width: 100%;
  height: 130px;
}
.cont {
  width: 88%;
  margin: 10px auto 0;
  .text {
    font-size: 14px;
    color: #222;
    line-height: 22px;
    text-indent: 30px;
    text-align: left;
    span {
      color: #ff2424;
    }
  }
}
.checkboxDiv {
  display: flex;
  align-items: center;
  font-size: 10px;
  color: #222;
  .Icheckbox {
    width: 10px;
    height: 10px;
  }
  .link {
    color: #86adfd;
  }
}
.btn {
  width: 88%;
  margin: auto;
  height: 40px;
  border-radius: 25px;
  color: #fff;
  background: #5c94fc;
  font-size: 14px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
